<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-form :inline="true" :model="searchForm" ref="searchForm">
            <el-form-item prop="date">
              <el-date-picker v-model="date" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"
                @change="(value) => {return dateChange(value,'searchForm')}" :clearable="false">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="name">
              <el-input v-model="searchForm.name" clearable placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.stop="search(true)">搜索</el-button>
              <el-button type="success" @click.stop="search">刷新</el-button>
              <el-button type="warning" @click.stop="outExcel">下载</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="table" border>
          <el-table-column prop="id" label="商品ID"></el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column prop="total_num" label="销量">
            <template slot-scope="scope">
              {{scope.row.total_num}} {{scope.row.unit_name}}
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page" :page-sizes="[10,20,30,40]" :page-size="searchForm.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="count">
          </el-pagination>
        </div>
      </el-card>
    </el-scrollbar>
  </div>
</template>
<script>
import { formatDateFun } from '@/untils/common.js'
import { getGoodsTotalList, getGoodsTotalExcel } from '@/network/api.js'

export default {
  name: 'goodstotal',
  data() {
    return {
      date: [
        new Date(new Date(new Date().toLocaleDateString('zh')).getTime()),
        new Date(new Date(new Date().toLocaleDateString('zh')).getTime() + 24 * 60 * 60 * 1000 - 1)
      ],
      searchForm: {
        page: 1,
        limit: 10,
        start: formatDateFun(new Date(new Date().toLocaleDateString('zh')).getTime()),
        end: formatDateFun(new Date(new Date().toLocaleDateString('zh')).getTime() + 24 * 60 * 60 * 1000 - 1),
        name: ''
      },
      table: [],
      count: 0
    }
  },
  created() {
    this.search()
  },
  computed: {},
  methods: {
    // 每页条数变化
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.search()
    },
    dateChange(v, formName) {
      if (v === null) {
        this[formName].start = ''
        this[formName].end = ''
      } else {
        this[formName].start = v[0]
        this[formName].end = v[1]
      }
    },
    async search(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchForm.page = 1
        }
        const rtn = await getGoodsTotalList(this.searchForm)
        this.table = rtn.list
        this.count = rtn.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    outExcel(mastr) {
      this.$confirm('此操作将下载excel表', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            const rtn = await getGoodsTotalExcel({ start: this.searchForm.start, end: this.searchForm.end, name: this.searchForm.name })
            const a = document.createElement('a')
            a.href = rtn
            a.download = '商品销售统计.xlsx'
            a.click()
          } catch (e) {
            this.$message.error(e.message)
          }
        })
        .catch(() => {
          this.$message.warnning('您取消了操作')
        })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
